<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>List</title>
</head>
<style>

     *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        list-style: none;
     }
     body {
        background-image: url(./01011e5e76ca51a801216518d29deb.jpg@1280w_1l_2o_100sh.jpg);
     }
     .box {
        background-color: #6b9a62;
        border-radius: 50px;
        border: 3px solid rgb(72, 74, 72);
        width: 400px;
        height: 300px;
        margin: 40px auto;
        text-align: center;
     }
     h1 {
        color: #0b100a;
        font-style: italic;
     }
     .tjl {
        background-color: #498e18;
        height: 30px;
        width: 100%;
        text-align: left;
     }
     .tjl #input {
        background-color: #6b9a62;
        color: #3e4d3b;
        padding-top: -10xp;
        height: 30px;
        width: 250px;
        border-radius:20PX ;
        border: 2px solid  rgb(72, 74, 72);
     }
     .tjl button {
        color: #000000;
        background-color: #3e4d3b;
        height: 30px;
        width: 130px;
        border: 2px solid  rgb(72, 74, 72);
        border-radius:80PX ;
     }
     .nr #list {
        text-align: left;
        border: 2px solid  rgb(72, 74, 72);
        
     }
     .nr #list li {
        font-size: 20px;
        border-bottom: 2px solid  rgb(72, 74, 72); 
         border-collapse: collapse; 
     }
     .nr {
        /* background-color: aqua; */
         width: 100%;
         height: 150px;
         overflow: auto;
     }
     .nr #list button {
        color: #000000;
        background-color: #3e4d3b;
        font-size: 15px;
        width: 50px;
        border-radius: 60px; 
        float: right;  
     }
     .db button{
        color: #000000;
        background-color: #3e4d3b;
        font-size: 15px;
        width: 150px;
        border-radius: 60px; 
     }

</style>
<body>
    <div class="box">
        <h1>List</h1>
        <HR style="FILTER:alpha(opacity=100,finishopacity=0,style=3)" width="100%"color=#dd9d1d SIZE=5>
        <!-- 添加区 -->
            <div class="tjl">
                <input class="input" type="text" id="input" placeholder="输入你想留下的吧">
                <button onclick="addItem()">加上!!!</button>
            </div>
        <!-- 内容区 -->
        <div class="nr">
            <ul id="list"></ul>           
        </div>
        <HR style="FILTER:alpha(opacity=100,finishopacity=0,style=3)" width="100%"color=#dd9d1d SIZE=5>
        <!-- 底部     -->
        <div class="db">
            <p id="count"></p>
            <button onclick="deleteAll()">删除所有!!!</button>
        </div>
    </div>

	<script>
		// 本地存储中na项目,没有就为空
		let items = JSON.parse(localStorage.getItem("items")) || [];
		displayItems();
		// 添加事件用
		function addItem() {
			let input = document.querySelector(".input");
			let item = input.value;
         
			if (item !== "") {
				items.push(item);
				input.value = "";
				displayItems();
				saveItems();
			}
		}
		// 显示项目
		function displayItems() {
			let list = document.getElementById("list");
			list.innerHTML = "";

			for (let i = 0; i < items.length; i++) {

				let li = document.createElement("li");

				li.innerHTML = items[i] + "<button onclick='deleteItem(" + i + ")'>删除</button>";
				list.appendChild(li);
			}

			displayCount();
		}
		// 删除单个项目
		function deleteItem(index) {
			items.splice(index, 1);

			displayItems();
			saveItems();
		}
		// 删除所有项目
		function deleteAll() {
			items = [];

			displayItems();
			saveItems();
		}
		// 显示项目数量
		function displayCount() {
			let count = document.getElementById("count");

			count.innerHTML = "你添加了 " + items.length + " 个";
		}
		// 保存到本地
		function saveItems() {
			localStorage.setItem("items", JSON.stringify(items));
		}
	</script>
</body>
</html>
